<script setup>
import {ref, onMounted, reactive} from "vue";
import {useCaseStore} from "@/stores/caseStore.js";
import router from "@/router/index.js";
import { ElMessageBox, ElMessage } from "element-plus";
// 引入案件编辑组件
import CaseEdit from '@/views/case/CaseEditView.vue';
// 引入案件详情组件
import CaseDetail from '@/views/case/CaseDetailView.vue';
const caseStore = useCaseStore();

const caseList = ref([])
const caseEditRef = ref(null); // 添加编辑组件引用
const caseDetailRef = ref(null); // 添加详情组件引用

const form = reactive({
  caseName: '',
  status: '',
  caseType: ''
})


onMounted(() => {
  handleSearch()
  console.log('caseStore.cases=eee', caseStore.cases)
})

const handleDetail = (row) => {
  console.log('row=', row)
  // 通过引用调用详情组件的 show 方法
  caseDetailRef.value.show(row);
}

const handleEdit = (row) => {
  console.log('row=', row)
  // 通过引用调用编辑组件的 show 方法
  caseEditRef.value.show(row);
}
const handleSearch = () => {
  caseStore.fetchCases({
    caseName: form.caseName,
    status: form.status,
    caseType: form.caseType
  })
}

const handleDelete = async (row) => {
  ElMessageBox.confirm('确定要删除该案件吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(async () => {
    try {
      await caseStore.deleteCase(row.id);
      ElMessage.success('删除成功');
    } catch (err) {
      ElMessage.error('删除失败');
    }
  }).catch(() => {
    ElMessage.info('已取消删除');
  });
}

const formatStatus = (status) => {
  //'draft', 'reviewing', 'approved', 'rejected', 'processing', 'completed'
  const statusMap = {
    'IN_PROGRESS':'未进行',
    'PENDING':'进行中',
    'CLOSED':'已完成'
  }
  return statusMap[status]
}

const formatCaseType = (caseType) => {
  //1:民事案件,2:刑事案件
  const statusMap = {
    'draft': 'info',
    'reviewing': 'primary',
    'approved': 'success',
    'rejected': 'warning',
    'processing': 'success',
    'completed': 'success'
  }
  return statusMap[caseType]
}


</script>

<template>
  <div>
    <div>
      <el-form>
        <el-row>
          <el-col :span="6">
            <el-form-item>
              <el-input v-model="form.caseName" placeholder="请输入案件名称"/>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item>
              <el-select v-model="form.status" placeholder="请选择案件状态">
                <el-option label="进行中" value="1"/>
                <el-option label="已完成" value="2"/>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item>
              <el-select v-model="form.caseType" placeholder="请选择案件类型">
                <el-option label="民事案件" value="1"/>
                <el-option label="刑事案件" value="2"/>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item>
              <el-button type="primary" @click="handleSearch">查询</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div>

    </div>

<!--    <el-table :data="caseStore.cases" border>-->
    <el-table :data="Array.isArray(caseStore.cases) ? caseStore.cases : []" border>

      <el-table-column prop="caseTitle" label="案件名称"/>
      <el-table-column prop="status" label="案件状态">
        <template v-slot="scope">
          <el-tag :type="formatCaseType(scope.row.status)">{{ formatStatus(scope.row.status) }}</el-tag>
        </template>
      </el-table-column>

      <el-table-column prop="caseType" label="案件类型">
        <template v-slot="scope">
          {{ scope.row.caseType === 1 ? '民事案件' : '刑事案件' }}
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="申请时间"/>
      <el-table-column prop="applicantName" label="申请人"/>
      <el-table-column label="操作" width="300">
        <template v-slot="scope">
          <el-button type="primary" size="small" @click="handleDetail(scope.row)">查看详情</el-button>
          <el-button type="warning" size="small" @click="handleDelete(scope.row)">删除</el-button>
          <el-button type="success" size="small" @click="handleEdit(scope.row)">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 添加案件编辑组件 -->
    <CaseEdit ref="caseEditRef" />
    <!-- 添加案件详情组件 -->
    <CaseDetail ref="caseDetailRef" />
  </div>
</template>

<style scoped>

</style>